<script setup lang="ts">
import selectShow from '/@/views/flow/workflow/components/dialog/selectAndShow.vue';

let props = defineProps({
	nodeUser: {
		type: Object,
		dafault: () => {},
	},
	row: {
		type: Array,
		dafault: () => [],
	},
	disableSelect: {
		type: Boolean,
		default: false,
	},
});
console.log(props.row)
const { proxy } = getCurrentInstance();

import { Check, Plus, Refresh } from '@element-plus/icons-vue';
</script>

<template>
	<div style="padding: 10px; min-height: 100px" v-loading="row.length == 0">
		<el-timeline :reverse="false">
			<el-timeline-item
				v-for="(node, index) in row"
				:key="index"
				size="large"
				:color="node.status != 2 ? (node.status == 1 ? 'pink' : 'green') : 'blue'"
				:icon="node.status == 2 ? Check : node.status == 1 ? Plus : Refresh"
			>
				<template v-if="node.selectUser && (!nodeUser[node.id] || nodeUser[node.id]?.length == 0)">
					<div style="display: flex">
            <p style="color: red">
              {{ node.name }}
              <template v-if="node.placeholder && node.placeholder.length > 0">[{{ node.placeholder }}]</template>
            </p>
            <div v-if="node.name == '审批人'" style="margin-left: 20px;scale: 0.8">
              <select-show></select-show>
            </div>
          </div>
				</template>

				<template v-else>
					<div style="display:flex; align-items: flex-start;">
            <p>
              {{ node.name }}
              <template v-if="node.placeholder && node.placeholder.length > 0">[{{ node.placeholder }}]</template>
            </p>
            <div v-if="node.name == '审批人'" style="margin-left: 20px;scale: 0.8;margin-top: -10px">
              <select-show></select-show>
            </div>
          </div>
				</template>

				<!--					渲染用户头像列表-->
				<div v-if="node.userVoList && node.userVoList.length > 0" style="display: flex; flex-direction: row; flex-wrap: wrap">
					<div
						class="box-card"
						v-for="(item1, index1) in node.userVoList"
						:key="index1"
						style="margin-bottom: 10px; border: 0px solid red; width: 100px; text-align: center"
					>
						<div class="node-show">
							<div style="overflow: hidden">
								<div class="d1">
									<div style="font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left;display: flex">
										{{ item1.name }}{{ item1.status == 1 ? '[未读]' : item1.status == 100 ? '[已读]' : '' }}

									</div>
                  
<!--                  <div style="display: flex">-->
<!--                    <div style="margin-right: 20px">-->
<!--                      <h4>选择部门</h4>-->
<!--                      <select-show type="dept" click1="1" @update:type="settype"></select-show>-->
<!--                    </div>-->
<!--                    <div v-if="approverConfig.nodeUserList.length > 0">-->
<!--                      <h4>选择角色</h4>-->
<!--                      <select-show type="role" :multiple="true" click1="2" @update:type="settype"></select-show>-->
<!--                    </div>-->
<!--                  </div>-->
									<div>
										<!-- <upload-img v-model:image-url="item1.sign" width="30px" height="30px"></upload-img> -->
										<upload-img v-show="item1.status === 2" disabled v-model:image-url="item1.def19" height="65px" width="80px"></upload-img>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--					渲染审批评论-->

				<template v-for="(item1, index1) in node.userVoList" :key="index1">
					<template v-if="item1.approveDesc?.length > 0">
						<div style="display: flex; flex-direction: row">
							<div style="width: 40px; text-align: center">
								<upload-img v-model:image-url="item1.avatar" disabled width="30px" height="30px"></upload-img>
							</div>
							<div style="height: 40px; line-height: 40px; font-size: 12px">
								{{ item1.name }}
							</div>
							<div style="height: 40px; line-height: 40px; font-size: 10px">(添加了批注)</div>
						</div>
						<div class="box-card" style="margin-bottom: 10px; padding: 5px; background-color: var(--el-fill-color-light)">
							{{ item1.approveDesc }}
						</div>
					</template>
				</template>

				<!--					选择用户-->

				<template v-if="node.selectUser">
					<select-show :disabled="disableSelect" v-model:orgList="nodeUser[node.id]" type="user" :multiple="node.multiple"></select-show>
				</template>

				<el-tabs v-if="node.branch.length > 0" type="border-card">
					<div v-for="(node1, index1) in node.branch" :key="index1">
						<div v-if="node1.placeholder && node1.placeholder != '默认分支'">
							<el-tab-pane :label="'分支' + (index1 + 1)" :name="index1 + ''">
								<template v-if="node1.placeholder && node1.placeholder.length > 0">[{{ node1.placeholder }}]</template>
								<div style="padding: 0px 5px">
									<flow-node-format :node-user="nodeUser" :disableSelect="disableSelect" :row="node1.children"></flow-node-format>
								</div>
							</el-tab-pane>
						</div>
					</div>
				</el-tabs>
			</el-timeline-item>
		</el-timeline>
	</div>
</template>
